import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import useProTableConfig from '../../hooks/useProTableConfig';
import styles from './index.less';
// import type { FileRuleOTD } from '@/services/types/rulesCenter/modelManagement';
import { openEnum, sensitiveEnum } from '@/enum';
import { FileAddFilled, FolderTwoTone } from '@ant-design/icons';
import { Button, Popconfirm, Space } from 'antd';
import { useEffect } from 'react';
import { history, useModel } from 'umi';
import hooks from '../../hooks';
export default () => {
  const {
    formRef,
    tabsType,
    tabKey,
    deleteResourceGroupData,
    setModalVisible,
    getTableList,
    getData,
    setKeyWord,
    setResourceData,
  } = hooks.useContainer();
  const proTableConfig = useProTableConfig({
    optionRender(config, props, dom) {
      return [...dom.reverse()];
    },
  });

  const { actionRef } = useModel('useTree', (model) => {
    return {
      actionRef: model.actionRef,
    };
  });

  useEffect(() => {
    return () => {
      setKeyWord('');
    };
  }, []);
  const tableColumns1: ProColumns<any>[] = [
    {
      title: '序号',
      width: 60,
      hideInSearch: true,
      renderText: (_: any, __: any, index: number) => index + 1,
    },
    {
      title: '原始数据资源',
      dataIndex: 'resourceName',
      width: 160,
      hideInSearch: true,
      render: (_, record) => (
        <a
          onClick={() => {
            history.push(
              {
                pathname: '/resourceManagement/fileList',
              },
              {
                id: record.id,
                val: record.openProperty,
              },
            );
          }}
        >
          <FolderTwoTone style={{ marginRight: '4px' }} />
          {record.resourceName}
        </a>
      ),
    },
    // {
    //   title: '创建人',
    //   dataIndex: 'createName',
    //   width: 120,
    //   hideInSearch: true,
    // },
    {
      title: '公开属性',
      dataIndex: 'openProperty',

      width: 160,
      hideInSearch: true,
      renderText: (_, record) => {
        return <>{openEnum[record.openProperty + '']}</>;
      },
    },
    {
      title: '敏感等级',
      dataIndex: 'sensitiveLevel',
      width: 160,
      hideInSearch: true,
      renderText: (_, record) => {
        return <>{sensitiveEnum[record.sensitiveLevel + '']}</>;
      },
    },

    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 160,
      hideInSearch: true,
    },

    {
      title: '数据大小',
      dataIndex: 'fileSize',
      ellipsis: false,
      width: 160,
      hideInSearch: true,
      renderText: (_, record) => {
        return <>{record.fileSize + 'M'}</>;
      },
    },
    {
      title: '描述',
      dataIndex: 'description',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '操作',
      width: 166,
      dataIndex: 'operate',
      hideInSearch: true,
      renderText: (text, record) => {
        return (
          <Space size="small" className={styles.spaceWrap}>
            <a
              onClick={() => {
                setResourceData({ ...record });
                setModalVisible(true);
              }}
            >
              修改资源
            </a>

            <Popconfirm
              key="delete"
              title="确认是否删除资源？"
              onConfirm={() => {
                deleteResourceGroupData.run(record.id);
              }}
            >
              <a style={{ color: '#f02323' }}>删除资源</a>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  const tableColumns2: ProColumns<any>[] = [
    {
      title: '知识库名称',
      dataIndex: 'name',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '知识库类型',
      dataIndex: 'type',
      width: 100,
      hideInSearch: true,
    },

    {
      title: '开放属性',
      dataIndex: 'chName',
      width: 126,
      hideInSearch: true,
      renderText: (_, record) => {},
    },
    {
      title: '敏感等级',
      dataIndex: 'claimStatus',
      width: 120,
      hideInSearch: true,
      renderText: (_, record) => {},
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 160,
      hideInSearch: true,
    },
    // {
    //   title: '创建人',
    //   dataIndex: 'createUserName',
    //   ellipsis: false,
    //   width: 120,
    //   hideInSearch: true,
    // },

    {
      title: '更新时间',
      dataIndex: 'updateTime',
      width: 160,
      hideInSearch: true,
    },
    {
      title: '描述',
      dataIndex: 'knowledgeDescribe',
      width: 160,
      ellipsis: true,
      hideInSearch: true,
    },

    {
      title: '操作',
      width: 162,
      dataIndex: 'operate',
      hideInSearch: true,
      renderText: (text, record) => {
        return (
          <Space size="small" className={styles.spaceWrap}>
            <a
              onClick={() => {
                history.push({
                  pathname: '/catalogue/edit',
                });
              }}
            >
              详情
            </a>

            <Popconfirm
              key="delete"
              title="确认是否删除？"
              onConfirm={() => {
                deleteResourceGroupData.run(record?.id);
              }}
            >
              <a style={{ color: '#f02323' }}>删除</a>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  return (
    <ProTable
      {...proTableConfig}
      className={styles.resourceTableWrap}
      actionRef={actionRef}
      formRef={formRef}
      columns={tableColumns1}
      form={{
        ignoreRules: false,
      }}
      request={getTableList.runAsync}
      size="middle"
      rowKey="id"
      ghost={true}
      search={false}
      // options={{
      //   search: true,
      // }}
      toolbar={{
        actions: [
          <Button
            key="create"
            icon={<FileAddFilled />}
            type="primary"
            onClick={() => {
              setModalVisible(true);
            }}
          >
            {`创建${tabsType[tabKey].name}`}
          </Button>,
        ],
        search: {
          style: {
            width: '300px',
          },
          placeholder: '请输入内容',
          onSearch: (arg) => {
            console.log(arg);
            setKeyWord(arg);
            actionRef.current?.reload();
          },
        },
      }}
    />
  );
};
